<template>
	<view class="app register">
		<view class="title">
			<u-icon name="arrow-leftward" style="margin: 0 0 24rpx" @tap="pageTo"></u-icon>
			<text>注册</text>
			<text class="sub">请输入手机号密码注册</text>
		</view>
		<view class="content">
			<view class="form-view">
				<view class="form-item form-border">
					<input
						placeholder-style="'color':'#8e8e8e'"
						v-model="form1.mobile"
						placeholder="手机号"
						class="form-input"
						type="text"
						:maxlength="11"
					/>
				</view>
				<view class="form-item form-border">
					<input
						placeholder-style="'color':'#8e8e8e'"
						placeholder="请输入短信验证码"
						v-model="form1.code"
						class="form-input"
						type="number"
						:maxlength="6"
					/>
					<vk-data-verification-code
						custom-style="font-size: 28rpx"
						type="register"
						seconds="60"
						:mobile="form1.mobile"
					></vk-data-verification-code>
				</view>
				<view class="form-item form-border">
					<input
						placeholder-style="'color':'#8e8e8e'"
						placeholder="请输入新密码"
						v-model="form1.password"
						class="form-input"
						type="password"
					/>
				</view>
				<view class="form-item form-border">
					<input
						placeholder-style="'color':'#8e8e8e'"
						placeholder="请再次输入新密码"
						v-model="form1.password2"
						class="form-input"
						type="password"
					/>
				</view>
			</view>
			<view class="submit-btn">
				<button
					class="btn success circle"
					hover-class="hover"
					shape="circle"
					type="success"
					:plain="false"
					:hair-line="false"
					@click="loginBySms"
				>
					注 册
				</button>
			</view>
			<view class="footer" style="margin-bottom: 100rpx">
				<label>
					<checkbox-group @change="checkboxChange">
						<checkbox
							class="footer-checkbox"
							active-color="#737373"
							shape="circle"
							value="true"
							:checked="form1.agreement"
						>
						</checkbox>
						<text>我已认真阅读并同意</text>
					</checkbox-group>
				</label>
				<navigator url="./agreement?type=2" open-type="navigate" style="color: #007aff">
					《用户协议》
				</navigator>
				、
				<navigator url="./agreement?type=1" open-type="navigate" style="color: #007aff">
					《隐私协议》
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: {
				agreement: true,
				mobile: "",
				password: "",
				password2: "",
				code: "",
				type: "register"
			},
			isRotate: false
		}
	},
	onLoad(options) {
		this.init(options)
	},
	methods: {
		// 页面数据初始化函数
		init(options = {}) {
			let that = this
			if (options.mobile) {
				that.form1.mobile = options.mobile
			}
			if (!that.form1.inviteCode) {
				that.form1.inviteCode = vk.getVuex("$user.inviteCode")
			}
		},
		pageTo() {
			vk.navigateBack()
		},
		checkboxChange(e) {
			let that = this
			let value = e.detail.value || []
			if (value.length > 0 && value[0]) {
				that.form1.agreement = true
			} else {
				that.form1.agreement = false
			}
		},
		// 登录(手机号+验证码) 不存在会自动注册
		loginBySms() {
			let that = this
			if (that.isRotate) {
				//判断是否加载中，避免重复点击请求
				return false
			}
			const { agreement, mobile, code, password, password2 } = that.form1
			if (!agreement) {
				return vk.toast("请阅读并同意用户服务及隐私协议")
			}
			if (!vk.pubfn.checkStr(mobile, "mobile")) {
				return vk.toast("请输入正确的手机号码")
			}
			if (!vk.pubfn.checkStr(password, "pwd")) {
				vk.toast("密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线")
				return
			}
			if (!vk.pubfn.checkStr(password2, "pwd")) {
				vk.toast("密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线")
				return
			}
			if (password != password2) {
				return vk.toast("两次密码必须相同!")
			}
			if (!vk.pubfn.checkStr(code, "mobileCode")) {
				return vk.toast("验证码格式为6位数字")
			}
			that.isRotate = true
			vk.userCenter.loginBySms({
				data: that.form1,
				success: data => {
					that.isRotate = false
					if (data.type == "login") {
						vk.toast("登录成功!")
					} else {
						vk.toast("注册成功!")
					}
					setTimeout(() => {
						vk.setVuex("$user.login.username", mobile)
						vk.setVuex("$user.login.password", password)
						vk.setVuex("$user.login.savePwd", true)
						// 跳转到首页,或页面返回
						let pages = getCurrentPages()
						if (
							pages.length >= 2 &&
							pages[pages.length - 2].route &&
							pages[pages.length - 2].route.indexOf("login") == -1
						) {
							vk.navigateBack()
						} else {
							// 进入首页
							vk.navigateToHome()
						}
					}, 1000)
				},
				complete: () => {
					that.isRotate = false
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
@import url("./css/main.css");
.register {
	height: 100vh;
	background-color: #f5f5f5;
}
</style>
